<template>
  <view class="detail-container">
    <image :src="baseURL+wallpaperUrl.img" mode="aspectFill" class="wallpaper animated"></image>
    <view class="actions">
      <view class="actions-left" @click="goBack">
        <text class="action-item">返回</text>
        <uni-icons type="refresh-filled" size="28" color="#dedede"></uni-icons>
      </view>
      <view class="actions-left" @click="downloadWallpaper">
        <text class="action-item">下载</text>
        <uni-icons type="download-filled" size="25" color="#dedede"></uni-icons>
      </view>
      <view class="actions-left" @click="shareWallpaper">
        <text class="action-item">分享</text>
        <uni-icons type="redo-filled" size="25" color="#dedede"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
import { WallpaperDetail } from '../../utils/api/index.js';
import {baseURL} from "../../utils/httpRequest/baseURL.js"
export default {
  data() {
    return {
		baseURL,
       wallpaperUrl: ''
    };
  },
   onLoad(options) {
	  let id=options.id
	  this.Wallpaper(id)
	  
  },
  methods: {
	  async Wallpaper(id){
		  const res=await WallpaperDetail(id)
		  console.log(res);
		  this.wallpaperUrl=res.data
	  },
	  
    goBack() {
      // 返回上一页
      uni.navigateBack();
    },
	
    downloadWallpaper() {
      uni.downloadFile({
        url: this.wallpaperUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '下载成功',
                  icon: 'success'
                });
              },
              fail: (err) => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
                console.error(err);
              }
            });
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
          console.error(err);
        }
      });
    },
    shareWallpaper(e) {
		console.log(e,121);
		// onShareAppMessage() {
		//   return {
		//     title: '标题', //分享标题 这个可以根据业务需求去定义
		//     path: '当前需要进行分享页面的地址' //例如：path: 'page/home/index'
		//   }
		// },
    }
  }
};
</script>

<style>
@keyframes zoomInAndOut {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.detail-container {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wallpaper {
  width: 100%;
  /* 或者其他你想要的宽度 */
  height: 100%;
}

.animated {
  animation: zoomInAndOut 3s forwards;
}

.actions {
  position: fixed;
  right: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 38%;
  padding: 20rpx;
  background-color: rgba(26, 25, 25, 0.41);
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
}

.actions-left {
  display: flex;
  flex-direction: column;
}

.action-item {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  text-align: center;
  color: #dedede;
}
</style>
